<template>
	<!--pages/productDetails/productDetails.wxml-->
	<view class="product_details">
		<swiper class="swiper" :indicator-dots="true" :current="currentSwiper" :autoplay="autoplay" @change="changeSwiper"
			indicator-active-color="#FFF">
			<swiper-item v-for="item in swiperList" :key="item">
				<video v-if="isVideo(item)" @play="playVideo" @pause="pauseVideo" :src="item.param_image" controls class="swiper_image"></video>
				<image v-else :src="item.param_image" mode="" class="swiper_image"></image>
			</swiper-item>
		</swiper>

		<!-- <image class="head" :src="filter.getImageFile(details.image)"></image> -->

		<view class="product_info">
			<view class="info_head">
				<view class="new_money">
					<text class="money_symbol">¥</text>
					<text class="money_txt">{{swiperList[currentSwiper].param_price}}</text>
					<!-- <text class="money_txt">{{filter.getPriceIntegr(details.sell_price)}}</text> -->
					<!-- <text class="money_decimal">.{{filter.getPriceDecimals(details.sell_price)}}</text> -->
				</view>
				<!-- <text class="old_money">¥{{details.market_price || 0}}</text> -->
			</view>
			<text class="info_title">{{swiperList[currentSwiper].name || ''}}</text>
			<!-- 商品规格 -->
			<view class="product_specifications">
				<!-- <view class="specifications_item">
					<view class="item_left">
						<text class="item_lab">选择</text>
						<view class="item_line" />
						<text class="item_type">颜色分类</text>
					</view>
					<view class="item_right">
						<view class="right_content">
							<text>4种颜色可选</text>
						</view>
						<image class="right_icon" src="/static/pages/image/area_right.png" mode=""></image>
					</view>
				</view> -->
				<view class="specifications_item" @click="onShowPop">
					<view class="item_left">
						<text class="item_lab">选择</text>
						<view class="item_line" />
						<text class="item_type" v-if="parmId">{{activeParam.name}}</text>
						<text class="item_type" v-else>产品规格</text>
					</view>
					<view class="item_right">
						<image class="right_icon" src="/static/pages/image/area_right.png" mode=""></image>
					</view>
				</view>
				<view class="specifications_item">
					<view class="item_left">
						<text class="item_lab">发货</text>
						<view class="item_line" />
						<text class="item_type">{{details.delivery_place || ''}}</text>
					</view>
					<view class="item_right">
						<text>月销</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 评价 -->
		<view>
			<view v-if="dataList.length == 0 " class="" v-else style="margin-top: 20upx; text-align: center;">
				暂无评论!
			</view>
			<view class="pj_box" v-else>
				<!-- <view class="pj_box"> -->
				<view class="pj_tlt">
					<view>宝贝评价（{{dataList.length}}）</view>
					<view @click="runqb(dataList[0].goods_id)">查看全部 > </view>
				</view>
				<view v-for="item in dataList" style="margin-bottom: 20upx;">
					<view class="pj_per">
						<image :src="item.head_image" mode=""></image>
						<view class="pj_a">
							<view>{{item.member_nickname}}</view>
							<view>{{item.add_time}}</view>
						</view>
					</view>
					<view class="">
						<view class="pjnr">
							{{item.value}}
						</view>
						<view class="imgpj">
							<image :src="JSON.parse(item.image)[0].img" mode=""></image>

						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 店铺 -->
		<view class="shop">
			<view class="shop_info" v-if="details.shop">
				<view class="shop_left">
					<image class="shop_img" :src="details.shop.shop_image" mode=""></image>
					<view class="shop_content">
						<text class="title">{{details.shop.shop_name}}</text>
						<view class="sunui-star">
							<SunuiStar width="180rpx" :starSize='"0.5em"' :defaultStar="3" :disabledStar="true" />
							<!-- <text class="sunuiStar_txt">3</text> -->
						</view>
						<text class="sales">月销{{details.shop.sold_count}}</text>
					</view>
				</view>
				<button class="shop_right" type="default">立即进店</button>
			</view>

			<view class="recommend">
				<view class="recommend_head">
					<text class="haed_txt">店铺推荐</text>
					<view class="head_right" @click="toAllShop">
						<text class="right_txt">查看全部</text>
						<image class="right_icon" src="/static/pages/image/right-red.png" mode=""></image>
					</view>
				</view>
				<view class="recommend_content" v-if="details.goods_list">
					<view class="recommend_item" v-for="item in details.goods_list" :key="item.id"
						@click="toDetails(item.id)">
						<image class="item_img" :src="getImages(item.image)" mode=""></image>
						<text class="item_title">{{item.title}}</text>
						<view class="item_money">
							<text style="font-size: 28rpx;">¥</text>
							<text style="font-size: 35rpx;">{{item.sell_price}}</text>
							<!-- <text style="font-size: 26rpx;">8</text> -->
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="details">
			<image class="img" src="/static/pages/image/commodity_details.png" mode="widthFix"></image>
			<view class="details_images">
				<image v-for="(item, index) in filter.getImageFile(details.introduce)" :key="index" class="images"
					:src="item" mode="widthFix"></image>
			</view>
		</view>

		<view class="footer_btn">
			<view class="btn_left">
				<button class="left_item btn_left_item" @click="toChat">
					<image class="icon_consult" src="/static/pages/image/consult.png" mode=""></image>
					<text>客服</text>
				</button>

				<view class="left_item" @click="onCollect">
					<image class="icon_collect"
						:src="details.is_favorites == 1 ? '/static/pages/image/collect1.png' : '/static/pages/image/collect.png'"
						mode=""></image>
					<text>收藏</text>
				</view>
			</view>
			<view class="btn_right">
				<button class="addCart btn" @tap="addCart">加入购物车</button>
				<button class="product_buttom btn" @tap="toOrders">立即购买</button>
			</view>

		</view>

		<u-popup v-model="showPop" zIndex="999" mode="bottom">
			<view class="type_list">
				<view class="type_head">
					<view class="head_left">
						<template v-if="parmId">
							<image class="left_img" :src="activeParam.param_image" mode=""></image>
							<view class="left_content">
								<view class="top">
									<image class="money_icon" src="/static/pages/image/money.png" mode=""></image>
									<text>{{activeParam.param_price}}</text>
								</view>
								<view class="bottom">{{activeParam.name}}</view>
							</view>
						</template>
					</view>
					<image @click="closePop" class="head_right" src="/static/pages/image/close.png" mode=""></image>
				</view>
				<view class="type_mian">
					<text class="title">规格分类({{paramList.length}})</text>
					<scroll-view scroll-y="true" >
						<view class="main_list">
								<view class="main_item" @click="onChangeParmActive(item)" v-for="item in paramList"
									:key="item.param_id" :class="{'is-active':parmId == item.param_id}">
									<image class="image" :src="item.param_image" mode=""></image>
									<view class="txt">{{item.name}}</view>
								</view>
						</view>
					</scroll-view>
				</view>
				<view class="buy_num">
					<text>购买数量</text>
					<uni-number-box v-model="buy_num" :min="1"></uni-number-box>
				</view>

				<view class="btn_content">
					<button class="btn" type="default" @click="submit">确定</button>
				</view>
			</view>
		</u-popup>
		
		<new-order />
	</view>
</template>

<script module="filter" lang="wxs" src="../../we7/resource/js/tools.wxs"></script>

<script>
	// pages/productDetails/productDetails.js
	var app = getApp();
	import SunuiStar from '@/components/sunui-star/sunui-star.vue'
	import uPopup from '@/components/u-popup/u-popup.vue'
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	export default {
		components: {
			SunuiStar,
			uPopup,
			uniNumberBox
		},
		data() {
			return {
				id: null,
				details: {},
				dataList: [],
				parm: '',
				showPop: false,
				selectTyle: [],
				specification: {},
				isClickShowPopType: null,
				parmId: null,
				paramList: [],
				activeParam: {},
				buy_num: 1,
				currentSwiper: 0,
				swiperList: [],
				autoplay:true
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.setData({
				id: options.id
			});
			app.globalData.util.request({
				url: "entry/wxapp/Api",
				data: {
					m: "monai_market",
					r: "goods.index.commentlist",
					goods_id: options.id
				},
				success: res => {
					this.dataList = res.data.data
				}
			});
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getGoodsDetail();

		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			// 发起会话
			toChat(){
				this.$store.dispatch('checkoutConversation', `C2C${this.details.uid}`)
			},
			pauseVideo(){
				this.autoplay = true	
			},
			playVideo(){
				this.autoplay = false
			},
			isVideo(item) {
				var pos = item.param_image.lastIndexOf(".");
				var lastname = item.param_image.substring(pos)
				let bol = false
				if(lastname == '.mp4'){
					bol = true
				}
				return bol
			},
			changeSwiper(event) {
				this.currentSwiper = event.detail.current
			},
			getImageList() {
				let list = []
				if (this.paramList.length > 1) {
					list = this.paramList
				} else {
					let images = JSON.parse(this.details.image)
					list = images ? images : []
				}
				return list
			},
			onCollect() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.adduserfavorites",
						goods_id: this.id,
						uid: uni.getStorageSync('uid')
					},
					success: res => {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.getGoodsDetail();
					},
					fail: res => {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				});
			},
			toDetails(id) {
				uni.reLaunch({
					url: '/pagesA/productDetails/productDetails?id=' + id
				});
			},
			toAllShop() {
				uni.navigateTo({
					url: '/pagesA/merchantDetails/merchantDetails?id=' + this.details.shop_id
				})
			},
			getImages(images) {
				let str = ''
				if (images) {
					str = JSON.parse(images)[0]
				}
				return str
			},
			closePop() {
				this.showPop = false
			},
			onChangeParmActive(item) {
				this.parmId = item.param_id
				this.activeParam = item
			},
			getParamList() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.new_getParam_list",
						goods_id: this.id,
						uid: this.details.uid
					},
					success: res => {
						this.paramList = res.data.data
						this.details.image.forEach(item => {
							this.swiperList.push({
								param_image: item,
								name: this.details.title,
								param_price: this.details.sell_price
							})
						})
						this.swiperList = this.swiperList.concat(this.paramList)
					},
					fail: res => {
						this.showToast(res.data.message);
					}
				});
			},
			onShowPop() {
				this.showPop = true
			},
			getImageFile(image) {
				let images = JSON.parse(image)
				return images
			},
			submit() {
				if (!this.parmId) {
					uni.showToast({
						title: "请选择规格",
						icon: "none"
					})
					return
				}

				this.showPop = false
				if (this.isClickShowPopType == 1) {
					this.toOrders()
				} else if (this.isClickShowPopType == 2) {
					this.addCart()
				}
			},
			onSelectType(index, t) {
				this.$set(this.selectTyle, index, t)
			},
			addCart() {
				if (!this.parmId) {
					this.isClickShowPopType = 2
					this.showPop = true
					return
				}
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "member.index.cart_add",
						uid: wx.getStorageSync('uid'),
						id: this.id,
						sum: this.buy_num,
						parm: this.parmId
					},
					success: res => {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},
			getGoodsDetail() {
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.goods_detail",
						id: this.id
					},
					success: res => {
						console.log(res);
						this.details = res.data.data
						this.details.image = JSON.parse(this.details.image)
						// 获取规格
						this.getParamList()
						// if (this.details.parm) {
						// 	this.parm = this.details.parm.map(item => item.group_value).join(',')
						// }
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},
			toOrders() {
				if (!this.parmId) {
					this.isClickShowPopType = 1
					this.showPop = true
					return
				}
				let parmas = [{
					details: this.details,
					parm: this.activeParam,
					sum: this.buy_num,
					total_money: (this.buy_num * this.activeParam.param_price).toFixed(2)
				}]
				wx.navigateTo({
					url: '/pagesA/orders/orders?parmas=' + JSON.stringify(parmas)
				});
			},
			runqb(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pagesA/pjpage/pjlist?id=' + id
				})
			}
		}
	};
</script>
<style>
	@import "./productDetails.css";
</style>

<style scoped lang="scss">
	.swiper {
		height: 670upx;
	}

	.swiper_image {
		width: 100%;
		height: 100%;
	}

	.type_list {
		padding: 50upx 35upx 60upx 35upx;
		box-sizing: border-box;

		.type_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F5F5F5;

			.head_left {
				display: flex;
				align-items: center;
				padding-bottom: 30upx;
				box-sizing: border-box;

				.left_img {
					width: 112upx;
					height: 112upx;
					border-radius: 10upx;
					margin-right: 22upx;
				}

				.left_content {
					color: #FF4E31;

					.top {
						font-size: 42upx;
					}

					.bottom {
						font-size: 24upx;
					}

					.money_icon {
						width: 15upx;
						height: 21upx;
						margin-right: 6upx;
					}
				}
			}

			.head_right {
				width: 41upx;
				height: 41upx;
			}
		}

		.type_mian {
			
			.title {
				display: block;
				margin: 38upx 0 27upx 0;
				font-size: 30upx;
				color: #000000;
			}

			.main_list {
				display: flex;
				flex-wrap: wrap;
				height: 40vh;
				// overflow: auto;

				.main_item {
					display: flex;
					align-items: center;
					background: #F5F5F5;
					border-radius: 10upx;
					padding: 3upx 0 3upx 10upx;
					box-sizing: border-box;
					margin-right: 20upx;
					margin-bottom: 25upx;
					height: fit-content;
						
					.image {
						width: 49upx;
						height: 49upx;
						border-radius: 10upx 10upx 10upx 5upx;
					}

					.txt {
						font-size: 24upx;
						color: #333333;
						padding: 0 17upx;
						box-sizing: border-box;
					}
				}


				.is-active {
					border: 2upx solid #FF4E31;
				}
			}
		}

		.buy_num {
			margin-top: 40upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn_content {
			margin-top: 45upx;
			padding: 0 30upx;
			box-sizing: border-box;
		}

		.btn {
			width: 100%;
			height: 114upx;
			line-height: 114upx;
			background: linear-gradient(-87deg, #0CD8C2, #0BC2AE);
			border-radius: 57upx;
			font-size: 36upx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
